<template>
  <div class="useredit">
    <Header title="账号管理"></Header>
    <div class="input-item">
       <van-field v-model="nickName" label="昵称" placeholder="请输入昵称"/>
      <van-field v-model="introduceSign" label="个性签名" placeholder="请输入个性签名"/>
      <van-field v-model="password" label="密码" placeholder="请输入密码"/>
    </div>
    <van-button type="primary" color="#ffc400" block round class="save-btn" @click="save">保存</van-button>
    <van-button type="primary" color="#ffc400" block round class="save-btn" @click="loginOut">退出登录</van-button>
  </div>
</template>

<script>
import Header from '../../components/Header.vue'
import {reactive,toRefs} from 'vue'
import { Toast } from 'vant'
import {useRouter} from 'vue-router'
export default {
  components:{
    Header,
  },
  setup() {
    const router=new useRouter()
    let data= reactive({
      nickName:'',
      introduceSign:'三分天注定，七分靠打拼。',
      password:''
    })

    // 保存
    const save=()=> {
      if(data.nickName && data.password){
        const userinfo=JSON.parse(localStorage.userinfo);
        const newUserInfo={
          用户名:data.nickName||userinfo['用户名'],
          密码:data.password||userinfo['密码'],
        };
        localStorage.setItem('userinfo',JSON.stringify(newUserInfo));
        Toast('修改成功！');
        router.push('./mine');
      }else{
        Toast('请输入修改的内容');
      }
    }
    // 退出登录
    const loginOut=()=> {
      localStorage.removeItem('isLogin');
      Toast('退出登录')
      router.push('./login')
    }
    return {
      ...toRefs(data),save,loginOut
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-button-danger{
  background-color: #ffc400;
  border-color: #ffc400;
}
.save-btn{
  margin: 20px auto;
  width: 80%;
}
</style>